import React, { useEffect,forwardRef,useState } from 'react';
import { Select, Form, Input } from 'antd';

const FormDef=forwardRef((props,ref)=>{
const {roleList,regionList}=props.selectOption
const [disableRegion,setDisabled]=useState(false)

useEffect(()=>{
  setDisabled(props.disableRegion)
},[props])

const changeRole=(e)=>{
if(e==1){
  ref.current.setFieldsValue({
  region: ''
})
  setDisabled(true)
}else{
  setDisabled(false)
}
}

  return (
  <Form
    ref={ref}
    name="basic"
    labelCol={{
      span: 4,
    }}
    wrapperCol={{
      span: 16,
    }}
    style={{
      maxWidth: 600,
    }}
    initialValues={{
      remember: true,
    }}
  >
    <Form.Item
      label="用户名"
      name="username"
      rules={[
        {
          required: true,
          message: '请输入用户名!',
        },
      ]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="密码"
      name="password"
      rules={[
        {
          required: true,
          message: '请输入密码!',
        },
      ]}
    >
      <Input.Password />
    </Form.Item>
    <Form.Item 
    label="区域"
    name="region"
    rules={[
      {
        required: !disableRegion,
        message: '请选择区域!',
      },
    ]}
    >
        <Select disabled={disableRegion}>
          {
          regionList.map(region=><Select.Option key={region.id} value={region.value}>{region.label}</Select.Option>)
          }
        </Select>
      </Form.Item>
      <Form.Item 
      label="角色"
      name="roleId"
      rules={[
        {
          required: true,
          message: '请选择角色!',
        },
      ]}
      >
        <Select onChange={(e)=>{changeRole(e)}}>
          {roleList.map(role=><Select.Option key={role.id} value={role.id}>{role.roleName}</Select.Option>)}
        </Select>
      </Form.Item>
  </Form>
  )
  });

export default FormDef